<template>
  <div ref="barChartContainer" class="chart"></div>
</template>

<script lang='ts'>
import { defineComponent } from 'vue';
import * as echarts from 'echarts';

export default defineComponent({
  name: 'TheBarChart',
  props: {
    seriesData: {
      type: Array,
      default: () => [3.5, 2.5, 4.5]
    },
    xAxisData: {
      type: Array,
      default: () => ['1', '2', '3', '4', '5']
    },
    yAxisData: {
      type: Array,
      default: () => ["未压缩", "基准压缩方法", "优化压缩方法"]
    },
    DataName: {
      type: String,
      default: "模型精度"
    }
  },
  data() {
    return {
      BarChart: null
    };
  },
  watch: {
    isOptionChange() {
      this.initBarChart();
    }
  },
  computed: {
    isOptionChange() {
      return { yAxisData: this.yAxisData, seriesData: this.seriesData };
    }
  },
  mounted() {
    this.initBarChart();
  },
  methods: {
    initBarChart() {
      const container = this.$refs.barChartContainer;
      if (!this.BarChart) {
        this.BarChart = echarts.init(container);
      }
      const chart = this.BarChart;
      const option = {
        grid: {//样式布局
          top: "5%",
          right: "5%",
          left: "15%"
        },
        legend: {//图例
          bottom: 10,
        },
        xAxis: {
          type: 'value',
          data: this.xAxisData
        },
        yAxis: {
          type: 'category',
          data: this.yAxisData
        },
        series: [{
          data: this.seriesData,
          name: this.DataName,
          type: 'bar'
        }]
      };
      chart.setOption(option);
    }
  }
});
</script>

<style lang='scss' scoped>
.chart {
  width: 100%;
  height: 300px;
  margin-top: 0;
  padding-top: 0;
}
</style>
